<template>
  <div class="pd-20 branch">
    <el-input class="w-200"
              placeholder="请输入门店"
              clearable
              @clear="handleQuery"
              v-model="searchCondition"></el-input>
    <el-button type="primary"
               @click="handleQuery">查 询
    </el-button>
    <el-button type="primary"
               @click="goPage">返 回
    </el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-button v-if="row.status===0"
                   type="primary"
                   @click="handleRow(row)">开启
        </el-button>
        <el-button v-if="row.status===1"
                   type="danger"
                   @click="handleRow(row)">封禁
        </el-button>
        <el-button type="primary"
                   @click="handleRowExpire(row)">管理有效期
        </el-button>
        <el-button type="primary"
                   @click="handle5GSetting(row)">5G健康管理师设置
        </el-button>
      </template>
    </element-table>

    <el-dialog title="管理有效期"
               :visible.sync="dialogVisible"
               width="30%"
               @close="closeDialog">
      <el-form :model="ruleForm"
               :rules="rules"
               ref="ruleFormRef">
        <el-form-item label="有效期:"
                      prop="accountExpire">
          <el-input v-model="ruleForm.accountExpire"
                    placeholder="请输入有效期"
                    class="w-200">
            <template slot="append">月</template>
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitData(rowObj)">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog :visible.sync="show5GDialog"
               title="5G健康管理师设置"
               width="50%"
               :close-on-click-modal="false"
               :close-on-press-escape="false">

      <element-table class="mt-20"
                     :columns="columns5g"
                     :data="table5gData">

        <template v-slot:option="{row}">
          <el-button type="primary"
                     v-if="row.is5gHealthManager==0"
                     @click="handleOption('setting', row)">设为5G健康管理师
          </el-button>
          <el-button type="danger"
                     v-if="row.is5gHealthManager==1"
                     @click="handleOption('cancle', row)">取消设置
          </el-button>
        </template>
      </element-table>


    </el-dialog>


  </div>
</template>
<script>
import elementTable from '@/base/ElementTable'

export default {
  name: 'branch', // 分店管理
  data() {
    // 限制正整数
    const blurText = (rule, value, callback) => {
      let ret = /^([0-9]*)$/;
      if (value === '') {
        callback(new Error('不能为空'))
      } else if (!ret.test(this.ruleForm.accountExpire)) {
        callback(new Error('输入整数'))
      } else {
        callback()
      }
    }
    return {
      show5GDialog: false,
      table5gData: [],
      hospitalid:'',
      columns5g: [
        {
          label: '店员姓名',
          prop: 'nickName',
          align: "center",
          width: 200
        }, {
          label: 'app账号',
          prop: 'loginName',
          align: "center",
          formatter: (row, cellValue) => {
            return this.doAway(row.loginName)
          }
        }, {
          label: '5G健康管理师',
          prop: 'is5gHealthManager',
          align: "center",
          formatter: (row, cellValue) => {
            return this.is5GHealther(row.is5gHealthManager)
          }
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 200
        }
      ],

      loading: false,
      dialogVisible: false,
      searchCondition: '',
      pageIndex: 1,
      pageSize: 20,
      pageTotal: 0,
      tableData: [],
      companyId: Number(this.$route.query.companyId),
      columns: [
        {
          label: '门店名称',
          prop: 'hospitalName',
          align: 'center'
        }, {
          label: '店长',
          prop: 'manager',
          align: 'center'
        }, {
          label: '联系方式',
          prop: 'phone',
          align: 'center'
        }, {
          label: '账户状态',
          prop: 'status',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.status === 1) return <el-tag type="success">开启</el-tag>
            if (row.status === 0) return <el-tag type="danger">封禁</el-tag>
          }
        }, {
          label: '创建时间',
          prop: 'createTime',
          align: 'center',
          formatter: (row, cellValue) => {
            return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
          }
        }, {
          label: '账户有效期',
          prop: 'accountExpire',
          align: 'center',
          formatter: (row, cellValue) => {
            return row.accountExpire ? row.accountExpire : '--'
          }
        }, {
          width: 400,
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true
        }
      ],
      ruleForm: {
        accountExpire: '' // 有效期
      },
      rules: {
        accountExpire: [
          {validator: blurText, trigger: 'blur'}
        ]
      },
      rowObj: {},
    }
  },
  methods: {
    //查询店员
    getClerkList() {
      this.post(this.api.doctorManager.list, {
        isAuth: 2,
        hospitalId: this.hospitalid
      }).then((res) => {
        if (res.data.code === '200') {
          this.table5gData = res.data.object
        }
      })
    },
    async handleOption(op, row) {
      switch (op) {
        case 'setting':
          this.$confirm('确认设置5G健康师?', '提示', {
            type: 'warning'
          }).then(() => {
              this.save5gHealthManager(row.id,1)
          })
          break;
        case 'cancle':
          this.$confirm('确认取消5G健康师?', '提示', {
            type: 'warning'
          }).then(() => {
            this.save5gHealthManager(row.id,0)
          })
          break;
      }
    },
    //设置5G健康
    save5gHealthManager(id,is5G) {
      this.post(this.api.company.save5gHealthManager, {
        id:id,
        is5gHealthManager:is5G
      }).then((res) => {
        if (res.data.code === '200') {
          this.$message.success('设置成功')
          this.getClerkList()
        }
      })
    },
    handleQuery() {
      this.pageIndex = 1
      this.getList()
    },
    async getList() {
      this.loading = true
      const {data: res} = await this.post(this.api.company.hospitalList, {
        searchCondition: this.searchCondition,
        companyId: this.companyId,
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize
      })
      if (res.code === '200') {
        this.loading = false
        this.tableData = res.object || []
        this.pageTotal = res.totalNum || 0
      }
    },
    // 改变状态
    handleRow(row) {
      let status = row.status === 1 ? '封禁' : '开启'
      this.$confirm(`确认${status}？`)
        .then(async _ => {
          const {data: res} = await this.post(this.api.company.changeBranchStatus, {
            id: row.id,
            status: row.status === 0 ? 1 : 0
          })
          if (res.code === '200') {
            this.$message.success(`${status}成功`)
            this.getList()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(_ => {
        });
    },
    // 管理有效期
    handleRowExpire(row) {
      this.dialogVisible = true
      this.rowObj = row
    },
    //5G设置
    handle5GSetting(row) {
      this.hospitalid=row.hospitalId
      this.show5GDialog = true
      this.getClerkList()
    },
    // 提交
    async submitData(data) {
      this.$refs.ruleFormRef.validate(async (valid) => {
        if (valid) {
          const {data: res} = await this.post(this.api.company.changeExpire, {
            id: data.id,
            ...this.ruleForm
          })
          if (res.code === '200') {
            this.$message.success('保存成功!')
            this.dialogVisible = false
            this.getList()
          } else {
            this.$message.error(res.message)
          }
        }

      })
    },
    closeDialog() {
      this.dialogVisible = false
      this.$refs.ruleFormRef.resetFields();
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page
      this.getList()
    },
    goPage() {
      this.$router.push({name: 'companyList'})
    },
    //去掉+86
    doAway(tel) {
      if (tel && tel.indexOf('+86') != -1) {
        return tel.replace('+86-', '')
      } else {
        return tel
      }
    },
    //判断是否是5G健康师
    is5GHealther(stauts) {
      if (stauts !== '' && stauts == 1) {
        return '是'
      }else {
        return '否'
      }
    },
  },
  created() {
    this.getList()
  },
  components: {
    'element-table': elementTable
  }
}
</script>
<style scoped lang="scss">
</style>
